<template>
    <div>
        <!-- 布局容器 -->
        <el-container>
            <!-- 头部 -->
            <el-header class="header">
                <!-- 退出 -->
                <div class="box">
                    <el-button type="primary" @click="tui">退出登录</el-button>
                </div>
            </el-header>

            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px" class="aside">
                    <el-col >
                        <el-menu default-active="2" class="el-menu-vertical-demo" router>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>分类</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2" router>
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>用户</span>
                                </template>
                                <el-menu-item-group >
                                    <el-menu-item index="/users">用户列表</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'A1Left',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        tui() {
            localStorage.clear('access_token')
            this.$router.push('/login')
        }
    },
};
</script>

<style   scoped>
.header {
    width: 96pc;
    height: 30px;
    background: #b3c0d2;
    display: flex;
    align-content: flex-end;
    justify-content: flex-end;
    align-items: center;
}

.aside {
    width: 40px;
    height: 41.3pc;
    background: #b3c0d2;
}
</style>